<template>
	<view>
		<uni-nav-bar left-icon="arrowleft" right-text="清空" title="订单搜索" @clickLeft="back" @clickRight="remove" :fixed="true" class="top" status-bar></uni-nav-bar>
		<view class="ul qf">
			<view class="li">
				<text>姓名</text>
				：
				<input type="text" value="" placeholder="请输入客户信息" v-model="userInformation" />
			</view>
			<view class="li">
				<text>订单号</text>
				：
				<input type="text" value="" placeholder="请输入订单号" v-model="orderSn" />
			</view>
			<view class="li">
				<text>货号</text>
				：
				<input type="text" value="" placeholder="请输入货号" v-model="goodsSn" />
			</view>

			<view class="li">
				<text>代 理 商</text>
				：
				<input type="text" value="" placeholder="请输入代理商姓名" />
				<view class="find" @click="open()">搜索</view>
			</view>
			<view class="li">
				<text>开始时间</text>
				：
				<picker mode="date" :value="date1" start="2000-01-01" :end="endDate" @change="bindDateChange1">
					<view class="uni-input" v-show="date1">{{ date1 }}</view>
					<view class="uni-placeholder" v-show="!date1">请选择开始时间</view>
				</picker>
				<image src="/static/img/calendar.png" class="time"></image>
			</view>
			<view class="li">
				<text>结束时间</text>
				：
				<picker mode="date" :value="date2" start="2000-01-01" :end="endDate" @change="bindDateChange2">
					<view class="uni-input" v-show="date2">{{ date2 }}</view>
					<view class="uni-placeholder" v-show="!date2">请选择结束时间</view>
				</picker>
				<image src="/static/img/calendar.png" class="time"></image>
			</view>
			<view class="li">
				<text>活动来源</text>
				：
				<picker @change="bindPickerChangetype" :value="index" :range="activitytypearray" range-key="desp">
					<view class="uni-input" v-if="activitytypearray.length != 0">{{ activitytypearray[index].desp }}</view>
				</picker>
				<uni-icons type="arrowdown" size="30rpx" color="#9b9b9b" class="uni-arrowdown" />
			</view>
			<view class="li">
				<text>活动名称</text>
				：
				<picker @change="bindPickerChangename" :value="indexname" :range="activityarraytmp" range-key="actName">
					<view class="uni-input" v-if="activityarraytmp.length != 0">{{ activityarraytmp[indexname].actName }}</view>
				</picker>
				<uni-icons type="arrowdown" size="30rpx" color="#9b9b9b" class="uni-arrowdown" />
			</view>
		</view>
		<view class="button" @click="find">搜 索</view>
	</view>
</template>

<script>
import { uniNavBar, uniIcons, uniPopup } from '@dcloudio/uni-ui';
import entrepot from '../../servers/entrepot/entrepot.js';
import { provinceList, cityList, areaList } from '../../common/area.js';
import jsonUtil from '../../common/jsonUtil.js';
export default {
	components: { uniNavBar, uniIcons, uniPopup },
	/* 	inject:['reload'], */
	data() {
		return {
			array: ['中国', '美国', '巴西', '日本'],
			orderstatusarray: [],
			activityarray: [],
			activityarraytmp: [],
			activitytypearray: [],
			index: 0,
			indexname: 0,
			indexstatus: 0,
			orderStatus: '' /* 订单状态 */,
			activitytype: '' /* 订单活动来源类型 */,
			activitid: '' /* 活动id */,
			date1: null,
			date2: null,
			endDate: null,
			goodsName: '',
			startTime: '',
			endTime: '',
			userInformation: '',
			orderSn: '',
			goodsSn: '',
			provinceList: provinceList,
			cityList: cityList,
			areaList: areaList,
			multiArray: [provinceList, cityList[0], areaList[0][0]],
			multiIndex: [0, 0, 0],
			multiIsIndex: [],
			province: '',
			city: '',
			region: ''
		};
	},
	mounted() {
		this.endDate = this._endDate();
		this.getData();
	},
	methods: {
		getData() {
			console.log(1231232112);
			shipments
				.activity()
				.then(res => {
					var isda = [];
					this.activityarray = res.data.data.records;
					for (var i = 0; i < this.activityarray.length; i++) {
						if (this.activityarray[i].actType == res.data.type[0].value) {
							this.activityarraytmp.push(this.activityarray[i]);
						}
					}
					this.activitytypearray = res.data.type;
					this.activitytype = this.activitytypearray[0].value; /* 订单活动来源类型 */
					this.activitid = this.activityarray[0].id; /* 活动id */
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
			shipments
				.orderStatus()
				.then(res => {
					this.orderstatusarray = res.data;
					this.orderStatus = this.orderstatusarray[0].value; /* 订单状态 */
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
		},
		bindPickerChangetype(e) {
			this.activityarraytmp = []; /* 置空 */
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.index = e.target.value;
			this.activitytype = this.activitytypearray[this.index].value; /* 活动类型ID */
			var type = this.activitytypearray[this.index].value;
			for (var i = 0; i < this.activityarray.length; i++) {
				var tmp = this.activityarray[i];
				console.log(type == tmp.actType);
				if (type == tmp.actType) {
					this.activityarraytmp.push(tmp);
				}
			}
			console.log(this.activityarraytmp.length);
		},
		bindPickerChangename(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.activitid = this.activityarray[e.target.value].id; /* 活动id */
		},
		bindDateChange(e) {
			this.orderStatus = this.orderstatus[e.target.value].value;
		},
		bindDateChange1(e) {
			this.startTime = e.target.value;
			this.date1 = e.target.value;
		},
		bindDateChange2(e) {
			if (e.target.value < this.startTime) {
				uni.showToast({
					title: '请选择开始时间小于结束时间',
					duration: 2000,
					complete() {
						return;
					}
				});
			} else {
				this.endTime = e.target.value;
				this.date2 = e.target.value;
			}
		},
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		remove() {
			console.log('清空');
			this.reload();
		},
		open() {
			// 需要在 popup 组件，指定 ref 为 popup
			this.$refs.popup.open();
		},
		close() {
			this.$refs.popup.close();
		},
		_endDate() {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			return year + '-' + month + '-' + day;
		},
		find() {
			var obj1 = JSON.stringify(this.coverData());
			jsonUtil.deleteEmptyProperty(obj1);
			uni.navigateTo({
				url: '/pages/entrepot/returnedgoods/list?obj=' + obj1
			});
		},
		/* 数据封装 */
		coverData() {
			var obj = new Object();
			if (this.goodsName != '') {
				obj.goodsName = this.goodsName;
			}
			if (this.orderStatus != '') {
				obj.orderStatus = this.orderStatus;
			}
			if (this.startTime != '') {
				obj.startTime = this.startTime;
			}
			if (this.endTime != '') {
				obj.endTime = this.endTime;
			}
			if (this.userInformation != '') {
				obj.userInformation = this.userInformation;
			}
			if (this.actId != '') {
				obj.actId = this.activitid;
			}
			if (this.goodsSn != '') {
				obj.goodsSn = this.goodsSn;
			}
			if (this.orderSn != '') {
				obj.orderSn = this.orderSn;
			}
			return obj;
		},
		bindMultiPickerColumnChange: function(e) {
			console.log(e);
			// console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
			this.multiIndex[e.detail.column] = e.detail.value;
			if (e.detail.column == 0) {
				this.multiArray[1] = this.cityList[e.detail.value];
				this.multiArray[2] = this.areaList[this.multiIndex[0]][0];
			} else if (e.detail.column == 1) {
				this.multiArray[2] = this.areaList[this.multiIndex[0]][this.multiIndex[1]];
			}
			return;

			// this.$forceUpdate()
		},
		changeList(e) {
			this.multiIsIndex = e.detail.value;
			(this.province = this.provinceList[this.multiIsIndex[0]]),
				(this.city = this.cityList[this.multiIsIndex[0]][this.multiIsIndex[1]]),
				(this.region = this.areaList[this.multiIsIndex[0]][this.multiIsIndex[1]][this.multiIsIndex[2]]);
		}
	}
};
</script>

<style lang="less" scoped>
.qf {
	padding: 0 20rpx;
	.li {
		position: relative;
		display: flex;
		flex-direction: row;
		line-height: 120rpx;
		text {
			font-size: 28rpx;
			width: 130rpx;
			text-align-last: justify;
		}
		input,
		picker {
			font-size: 26rpx;
			width: 557rpx;
			height: 90rpx;
			line-height: 90rpx;
			border: 1px solid #e1e1e1;
			border-radius: 10rpx;
			padding: 0 27rpx;
			box-sizing: border-box;
			margin: 15rpx 0;
			background: #ffffff;
			.uni-placeholder {
				color: #999999;
			}
		}
		.find,
		.uni-arrowdown,
		.time {
			position: absolute;
			right: 0;
			top: 15rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
		}
		.find {
			width: 121rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: #bd3c8c;
			border-bottom-right-radius: 10rpx;
			border-top-right-radius: 10rpx;
		}
		.uni-arrowdown {
			width: 50rpx;
			pointer-events: none;
		}
		.time {
			top: 40rpx;
			right: 20rpx;
			width: 36rpx;
			height: 34rpx;
			pointer-events: none;
		}
	}
}
.button {
	height: 90rpx;
	line-height: 90rpx;
	margin: 30rpx 20rpx;
	text-align: center;
	color: #ffffff;
	border-radius: 50px;
	font-size: 32rpx;
	background: linear-gradient(90deg, #d2158a, #fc6395);
}
.structure {
	width: 80vw;
	max-height: 60vh;
	margin: 0 auto;
	overflow-y: auto;
	background: #ffffff;
	border-radius: 20rpx;
	.ul {
		padding-bottom: 100rpx;
		.li {
			line-height: 123rpx;
			.msg {
				font-size: 30rpx;
				padding: 0 20rpx 0 110rpx;
				border-bottom: 1px solid #e1e1e1;
				image {
					width: 26rpx;
					height: 22rpx;
					margin-right: 26rpx;
					transform: rotate(-90deg);
				}
				image.avtive {
					transform: rotate(0deg);
				}
				.name {
					margin-right: 30rpx;
				}
				.isname {
					color: #bd3c8c;
				}
			}
			.sublevel {
				padding: 0 20rpx 0 70rpx;
			}
		}
	}
	.choice {
		position: absolute;
		bottom: 0rpx;
		width: 100%;
		line-height: 88rpx;
		background: #bd3c8c;
		color: #fff;
		text-align: center;
		font-size: 30rpx;
		border-radius: 0 0 20rpx 20rpx;
	}
}
</style>
